<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl mb-4 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </div>
        <h1 class="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent mb-2">提交资源</h1>
        <p class="text-gray-600 text-lg">分享你的学习资源，帮助更多人成长</p>
      </div>

      <!-- 资源类型选择 -->
      <div class="max-w-4xl mx-auto">
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20 p-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">选择资源类型</h2>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 项目上传 -->
            <div 
              class="group cursor-pointer bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 border-2 border-transparent hover:border-green-300 transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
              @click="navigateToProject"
            >
              <div class="text-center">
                <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                  <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-green-600 transition-colors">上传项目</h3>
                <p class="text-gray-600 text-sm mb-4">分享你的编程项目，展示技术实力</p>
                <div class="flex flex-wrap gap-2 justify-center">
                  <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">Web应用</span>
                  <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">移动应用</span>
                  <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">开源库</span>
                </div>
              </div>
            </div>

            <!-- 课程上传 -->
            <div 
              class="group cursor-pointer bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-6 border-2 border-transparent hover:border-blue-300 transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
              @click="navigateToCourse"
            >
              <div class="text-center">
                <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                  <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">上传课程</h3>
                <p class="text-gray-600 text-sm mb-4">创建教学课程，分享专业知识</p>
                <div class="flex flex-wrap gap-2 justify-center">
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">视频教程</span>
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">实战课程</span>
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">技术分享</span>
                </div>
              </div>
            </div>

            <!-- 电子书上传 -->
            <div 
              class="group cursor-pointer bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 border-2 border-transparent hover:border-purple-300 transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
              @click="navigateToEbook"
            >
              <div class="text-center">
                <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                  <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">上传电子书</h3>
                <p class="text-gray-600 text-sm mb-4">分享优质电子书，传播知识</p>
                <div class="flex flex-wrap gap-2 justify-center">
                  <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">技术书籍</span>
                  <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">学习资料</span>
                  <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">参考文档</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 返回按钮 -->
          <div class="flex justify-center mt-8">
            <button
              @click="router.back()"
              class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
            >
              返回
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateToProject = () => {
  router.push('/projects/create')
}

const navigateToCourse = () => {
  router.push('/courses/create')
}

const navigateToEbook = () => {
  router.push('/ebooks/create')
}
</script>
